<template>
	<div>
    <el-divider>
      <el-icon>属性配置</el-icon>
    </el-divider>
    <zh-form label-position="top" :model="_value" :span="24">
      <zh-form-select  prop="type" label="类型(手机端)" v-model="_value.type"
      :options="[
				{ dictKey: 'picker', dictValue: 'picker'},
				{ dictKey: 'list', dictValue: 'list'},
				{ dictKey: 'tree', dictValue: 'tree'}
			]"></zh-form-select>
      <zh-form-switch  prop="required" label="是否必填" v-model="_value.required"> </zh-form-switch>
      <zh-form-switch  prop="multiple" label="是否多选" v-model="_value.multiple"> </zh-form-switch>
      <zh-form-number prop="max" label="最多可以选择的项目数" v-model="_value.max"></zh-form-number>
      <zh-form-switch prop="allowClear" label="是否可清空" v-model="_value.allowClear"> </zh-form-switch>
      <zh-form-switch prop="showSearch" label="是否可搜索" v-model="_value.showSearch"> </zh-form-switch>
      <zh-form-switch prop="disabled" label="是否禁用" v-model="_value.disabled"> </zh-form-switch>
      <zh-form-input  prop="placeholder" label="为空时占位内容" v-model="_value.placeholder"></zh-form-input>
      <zh-form-input prop="fieldNames" type="textarea" :row="3" label="自定义节点字段json" v-model="_value.fieldNames"></zh-form-input>
      <zh-col>
        <el-tabs
          v-model="state.activeName"
          type="card"
          @tab-change="handleChange"
        >
          <el-tab-pane label="静态数据" name="1">
            <zh-table :height="300" type="default" :columns="state.tableColumn" :data="_value.options" :rowConfig="{keyField:'index'}" :edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
              <template #dictKey_edit="{ row }">
                <zh-input v-model="row.dictKey"></zh-input>
              </template>
              <template #dictValue_edit="{ row }">
                <zh-input v-model="row.dictValue"></zh-input>
              </template>
              <template #operate_default="{ row }">
                <zh-button type="danger" link buttonType="del" @click="delClick(row)"></zh-button>
              </template>
            </zh-table>
            <zh-button  link buttonType="add" @click="add">添加</zh-button>
          </el-tab-pane>
          <el-tab-pane label="动态数据" name="2">
            <zh-form-input prop="dictField" label="数据字典字段" v-model="_value.dictField"></zh-form-input>
            <zh-form-input prop="funcCode" label="功能编号" v-model="_value.funcCode"></zh-form-input>
            <zh-form-input prop="url" label="接口url" v-model="_value.url"></zh-form-input>
            <zh-form-input prop="searchParams" type="textarea" :row="3" label="查询参数json" v-model="_value.searchParams"></zh-form-input>
            <zh-form-input prop="searchField" label="查询主字段" v-model="_value.searchField"></zh-form-input>
          </el-tab-pane>
        </el-tabs>
      </zh-col>
    </zh-form>
  </div>
</template>
<script lang="ts" setup name="SelectSetting">
const emits = defineEmits(['update:modelValue']);
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelValue: Object,
});
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
let _value = ref(Object.assign({fcDragTag:'input'},props.modelValue || {}));
let state = reactive({activeName:'1',
 tableColumn:[
    { field: 'dictKey', title: '选项Key', fixed: 'left', align: 'center', minWidth: 100,slots: {default: 'dictKey_edit'} },
		{ field: 'dictValue', title: '选择显示值', fixed: 'left', align: 'center', minWidth: 100,slots: {default: 'dictValue_edit'} },
    { field: 'operate', title: '操作', align: 'center',fixed: 'right',  minWidth: 50,slots: {default: 'operate_default'}},
  ]})
//------------------定义调用方法-------------------------
const handleChange=(e)=>{
  if(e==='1'){
    _value.value.lazy=false
  }else{
    _value.value.lazy=true
  }
  
}
const add=()=>{
  let options=_value.value.options||[]
  options.push({dictKey:'',dictValue:'',index:options.length})
  _value.value.options=options
}
const delClick=(row)=>{
  let options=_value.value.options
  options.splice(row.index,1)
  _value.value.options=options
}
//------------------初始化------------------------------
onMounted(() => {});
//------------设置给父组件调用的数据/方法(组件)-----------
watch(
	() => props.modelValue,
	(val) => {
		_value.value = Object.assign({fcDragTag:'input'},val || {});
	},
	{
		deep: true,
	}
);
watch(
	() => _value.value,
	(val) => {
		if(val.dictField){
      _value.value.lazy=false
    }
		emits('update:modelValue', val);
	},
	{
		deep: true,
	}
);

</script>
<style lang="scss" scoped></style>